<template>
  <div class="echarts_bar">
     <div id="myChart" style="width:800px;height:500px"></div>
  </div>
</template>

<script>
export default {
  name: 'bar',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  props: {
    data: Array,
    time:String
  },
  watch: {
    data(val){
      console.log(val)
      this.drawLine();
    }
  },
  mounted () {
    this.drawLine();
  },
  methods: {
    drawLine () {
      var echarts = require('echarts');
      var myChart = echarts.init(document.getElementById('myChart'));
      myChart.setOption({
        color: ['#2d8cf0'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            
        },
        xAxis: {
          data: ['粉丝数', '会员数',  '浏览量', '付费']
        },
        yAxis: {},
        series: [{
          name: this.time + '新增',
          type: 'bar',
          data: this.data
        }]
      });
      window.addEventListener("resize", () => {
           myChart.resize();
      }); 
    }
  }
}
</script>
<style lang="less">
  
</style>